<!--  -->
<template>
  <div id="app_Resourcelist">
    <!------------------------------------------------ 头部----------------------------------------------- -->
    <div class="app_Resourcelist_top">
      <div class="app_Resourcelist_top_content">
        <section class="app_Resourcelist_top_head">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button @click="clear">重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </section>
        <section class="app_Resourcelist_foot">
            <div>
                <label style="width:250px;">资源名称：</label>
                <el-input style="width:210px" v-model="input" placeholder="资源名称"></el-input>
            </div>
            <div>
                <label style="width:250px;">资源路径：</label>
                <el-input style="width:210px" v-model="input2" placeholder="资源路径"></el-input>
            </div>
            <div>
                <label style="width: 250px;">资源分类：</label>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </section>
      </div>
    </div>
    <!-- --------------------------------------------中间------------------------------------------------------- -->
    <div class="app_Resourcelist_center">
      <section class="app_Resourcelist_center_content">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button>添加</el-button>
      </section>
    </div>
    <!-- -----------------------------------------------底部 -------------------------------------------->
    <div class="app_Resourcelist_bottom">
      <div class="app_Resourcelist_bottom_content">
        <el-table :data="tableData" border style="width: 100%">
          <!-- 1 -->
          <el-table-column prop="date" label="编号" width="180" align="center">
          </el-table-column>
          <!-- 2 -->
          <el-table-column  prop="name"  label="角色名称" width="180" align="center">
          </el-table-column>
          <!-- 3 -->
          <el-table-column prop="address" label="描述" align="center">
          </el-table-column>
          <!-- 4 -->
          <el-table-column prop="number" label="用户数" align="center">
          </el-table-column>
          <!-- 5 -->
          <el-table-column prop="time" label="添加时间" align="center">
          </el-table-column>
          <!-- 6 -->
          <el-table-column prop="yorn" label="是否启用" align="center">
            <el-switch v-model="value">
            </el-switch>
          </el-table-column>
          <!-- 7 -->
          <el-table-column prop="operation" label="操作" align="center">
            <div>
              <span>
                <el-button type="text" @click="open"><a href="javascript:void(0);">编辑</a></el-button>
                <el-button type="text" @click="updete"><a href="javascript:void(0);">删除</a></el-button>
                </span>
            </div>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- --------------------------------------------底部选择框 ------------------------------------->
    <div class="app_Resourcelist_bottom_foot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="30">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        options: [{
          value: '选项1',
          label: '商品模块'
        }, {
          value: '选项2',
          label: '订单模块'
        }, {
          value: '选项3',
          label: '营销模块'
        }, {
          value: '选项4',
          label: '权限模块'
        }, {
          value: '选项5',
          label: '内容模块'
        }],
        value: '',
      tableData: [
        {
          date: "1",
          name: "商品管理员",
          address: "只能查看及操作商品",
          number: "0",
          time: "2020-02-03 16:50:37",
          yorn: "",
          operation: "",
        },
        {
          date: "2",
          name: "订单管理员",
          address: "只能查看及操作订单",
          number: "0",
          time: "2018-09-30 15:53:45",
          yorn: "",
          operation: "",
        },
        {
          date: "3",
          name: "超级管路员",
          address: "拥有所有查看和操作功能",
          number: "0",
          time: "2020-02-02 15:11:05",
          yorn: "",
          operation: "",
        },
      ],
      input: "",
      input2: "",
    //   value: "true",
      
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    clear(){
      this.input="";
      this.input2="";
      this.value="";
    },
     /* 删除 */
    updete() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      /* 编辑 */
      open() {
        this.$alert('<textarea rows="8" cols="40" style="margin-left:40px"></textarea>', '编辑 :', {
          dangerouslyUseHTMLString: true
        });
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
/* --------------------------头部--------------------------------- */
#app_Resourcelist {
  margin: 20px;
  .app_Resourcelist_top {
    border: 1px solid #ebeef5;
    color: #303133;
    .app_Resourcelist_top_content {
      padding: 20px;
      .app_Resourcelist_top_head {
        i.el-icon-search {
        }
        span {
          margin-right: 895px;
          margin-left: 10px;
          font-size: 16px;
        }
        el-button {
        }
      }
      section.app_Resourcelist_foot {
          display: flex;
          margin:20px 0  0  60px;
          
        div {
            margin-right: 50px;
            label {

            }

            el-input {

            }
         }
        }
     
    }
  }
}
/* ----------------------------中间 ------------------------------*/
.app_Resourcelist_center {
  border: 1px solid #ebeef5;
  color: #303133;
  margin-top: 20px;
  .app_Resourcelist_center_content {
    padding: 20px;
    i.el-icon-tickets {
    }

    span {
      margin-right: 1000px;
      margin-left: 10px;
      font-size: 16px;
    }

    el-button {
    }
  }
}
/* -------------------------底部 --------------------------------------*/
.app_Resourcelist_bottom {
  margin-top: 20px;
  .app_Resourcelist_bottom_content {
    div {
      span {
        a {
          text-decoration: none;
          color: #409eff;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
}
/* -------------------------底部分页器------------------------------------ */
.app_Resourcelist_bottom_foot{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
